<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<%@ taglib prefix="gatherForm" uri="http://www.tongxingzhe.cn/gatherForm" %>
<%@ taglib prefix="memberForm" uri="http://www.tongxingzhe.cn/memberForm" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>信息管理</title>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/common/table.css">

    <style type="text/css">

        .word-break {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            word-break: break-all;
        }

        .layui-table td, .layui-table th {
            padding-left: 10px !important;
            padding-right: 10px !important;
        }

        .f-search-bar input[type=text] {
            width: 212px !important;
        }

        .layui-table td:hover {
            cursor: pointer;
        }

        [class*=aui-col-xs-] {
            padding: 2.5px;
        }

        .aui-col-xs-4 {
            position: relative;
            float: left;
        }

        .aui-col-xs-4 {
            width: 33.33333333%;
        }

        .list-img-4 {
            height: 50px;
        }

        .list-img {
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            position: relative;
        }

        .my-act-list-content * {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
            outline: none;
        }

    </style>
    <%@include file="../include/commonFile.jsp" %>
</head><body>
<!--头部-->
<%@include file="../include/header.jsp" %>
<div class="index-outside">
    <%@include file="../include/sidebar.jsp" %>
    <!--内容-->
    <section>
        <div class="section-main">
            <form class="layui-form" action="${ctx}/gatherForm/form/list.do?projectId=${project.id}" id="myForm"
                  method="post">
                <input type="hidden" name="pageNo" id="pageNo"/>
                <div class="f-search-bar">
                    <div class="search-container">
                        <ul class="search-form-content">
                            <li class="form-item"><label class="search-form-lable">填写时间</label>
                                <div class="check-btn-inner" id="timeType">
                                    <a id="all" href="javascript:void(0);"
                                       onclick="setTimeType($(this),0,'#myForm')" ${empty input.timeType || input.timeType == 0 ? 'class="active"' : ''}>全部</a>
                                    <a href="javascript:void(0);"
                                       onclick="setTimeType($(this),1,'#myForm')" ${input.timeType == 1 ? 'class="active"' : ''}>今天</a>
                                    <a href="javascript:void(0);"
                                       onclick="setTimeType($(this),2,'#myForm')" ${input.timeType == 2 ? 'class="active"' : ''}>本周内</a>
                                    <a href="javascript:void(0);"
                                       onclick="setTimeType($(this),3,'#myForm')" ${input.timeType == 3 ? 'class="active"' : ''}>本月内</a>
                                    <input type="hidden" name="timeType" value="${input.timeType}"/>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input class="layui-input" type="text" name="createStart"
                                               value="${input.createStart}" placeholder="开始日"
                                               style="width: auto!important;">
                                    </div>
                                    -
                                    <div class="layui-input-inline">
                                        <input class="layui-input" type="text" name="createEnd"
                                               value="${input.createEnd}" placeholder="截止日"
                                               style="width: auto!important;">
                                    </div>
                                </div>
                            </li>
                            <li class="form-item-inline">
                                <div class="sub-btns">
                                    <a class="layui-btn layui-btn-danger"
                                       href="javascript:submitFunction('#myForm')">查询</a>
                                    <a class="layui-btn layui-btn-normal"
                                       href="javascript:resetFunction('#myForm')">重置</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </form>
            <div class="my-act-list-content">
                <ul class="num">
                    <div class="r">
                        <li style="cursor: pointer;" class="r">
                            <a class="layui-btn layui-btn-danger layui-btn-sm" id="btnExport">导出EXCEL</a>
                        </li>
                    </div>
                    <p class="cl"></p>
                </ul>
                <div class="cl">
                    <table class="layui-table" id="myTable" style="table-layout:fixed;">
                        <c:set value="${fn:length(fields)}" var="extOut"></c:set>
                        <c:if test="${fn:length(fields) > 5}">
                            <c:set value="5" var="extOut"></c:set>
                        </c:if>
                        <colgroup>
                            <col width="75px">
                            <col width="120px">
                            <c:forEach var="field" items="${fields}" end="${extOut}">
                                <col>
                            </c:forEach>
                            <col width="120px">
                        </colgroup>
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>
                                <div class="word-break">填写时间</div>
                            </th>
                            <c:forEach var="field" items="${fields}" end="${extOut}">
                                <th>
                                    <div class="word-break" title="${field.title}">${field.title}</div>
                                </th>
                            </c:forEach>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach var="formInfo" items="${formInfos}" varStatus="st">
                            <tr data-maxIndex="${formInfo.maxIndex}" title="点击查看更多">
                                <td>${page.limit * (page.page-1) + st.count}</td>
                                <td>
                                    <div class="word-break"><fmt:formatDate value="${formInfo.createDate}"
                                                                            pattern="yyyy-MM-dd HH:mm"/></div>
                                </td>
                                <c:forEach var="field" items="${fields}" end="${extOut}">
                                    <td>
                                        <c:if test="${field.type == 'image'}">
                                            <c:set var="thatValue"
                                                   value="${gatherForm:getFormInfo(field.id, formInfo.maxIndex)}"></c:set>
                                            <c:set var="urls" value="${fn:split(thatValue, ',')}"></c:set>
                                            <c:forEach var="imgUrl" items="${urls}" end="2">
                                                <div class="aui-col-xs-4">
                                                    <div
                                                            class="list-img list-img-4 common-img">
                                                        <img src="<c:if test="${imgUrl != null}">${imgUrl}?imageMogr2/auto-orient/crop/180x180</c:if>" alt="" onerror="txz.errImg(this)" onload="txz.imgLoad(this)">
                                                    </div>
                                                </div>
                                            </c:forEach>
                                        </c:if>
                                        <c:if test="${field.type != 'image'}">
                                            <c:if test="${field.category == 'FIELD_RESOURCE'}">
                                                <c:set var="memberId" value="${gatherForm:getFormInfo(field.id, formInfo.maxIndex)}"/>
                                                ${memberForm:getRealNameById(memberId)}
                                            </c:if>
                                            <c:if test="${field.category != 'FIELD_RESOURCE'}">
                                                <div class="word-break">${gatherForm:getFormInfo(field.id, formInfo.maxIndex)}</div>
                                            </c:if>
                                        </c:if>
                                    </td>
                                </c:forEach>
                                <td class="tb-opts">
                                    <div class="opts-btns tb-opts">
                                        <a class="green button"
                                           href="javascript:openDialogShow('信息详情','${ctx}/gatherForm/form/formInfo.do?maxIndex=${formInfo.maxIndex}&projectId=${project.id}','600px','550px');">查看</a>
                                        <a class="red button"
                                           href="javascript:txz.deleteObject('确定要删除吗？','${ctx}/gatherForm/form/delete.do?maxIndex=${formInfo.maxIndex}&projectId=${project.id}','');">删除</a>
                                    </div>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                    <c:if test="${fn:length(formInfos) == 0}">
                        <div class="f16 tc mt15">还没有收集</div>
                    </c:if>
                    <div class="page-content">
                        <div id="page_content" class="page-container"></div>
                    </div>
                </div>
            </div>
        </div>
        <!--底部-->
        <%@include file="../include/footer.jsp" %>
    </section>
</div>

<script type="text/javascript" src="${ctx}/script/common/list.js"></script>
<script type="text/javascript" src="${ctx}/script/common/table_option.js"></script>
<script type="text/javascript">

    showActive('${input.createStart}', '${input.createEnd}', '#timeType');


    $(function () {
        //加载分页
        loadPageNew({elem: 'page_content', totalCount: '${page.totalCount}', limit: '${page.limit}', page: '${page.page}'});
        layui.use(['laydate'], function () {
            var laydate = layui.laydate;
            // 查询发布日期
            var start = {
                elem: 'input[name=createStart]'
            };

            var end = {
                elem: 'input[name=createEnd]'
            };
            laydate.render(start);
            laydate.render(end);
        });
        $(".layui-table").delegate("td", "click", function (e) {
            var $target = $(e.target);
            if ($target.hasClass("button")) {
                e.stopPropagation();
            } else {
                var $tr = $target.closest("tr");
                var maxIndex = $tr.attr("data-maxIndex");
                var projectId = '${project.id}';

                openDialogShow('信息详情', '${ctx}/gatherForm/form/formInfo.do?maxIndex=' + maxIndex + '&projectId=' + projectId, '600px', '550px');
                e.stopPropagation();
            }
        });

        $("#btnExport").click(function () {
            layer.confirm('确认要导出Excel吗?', {
                icon: 3,
                title: '系统提示'
            }, function (index) {
                var url = "${ctx}/gatherForm/form/exportFormInfo.do?projectId=${project.id}";
                //loading层
                var loadIndex = layer.load(1, {
                    shade: [0.1,'#fff'] //0.1透明度的白色背景
                });
                $.post(url, $("#myForm").serialize(), function (res) {
                    top.layer.close(loadIndex);
                    if (res.success) {
                        window.location.href = res.data;
                    } else {
                        util.layerMsgError(res.description)
                    }
                });
                top.layer.close(index);
            });
        });
    });
</script>

<script type='text/javascript'>
    var subnav = document.getElementById('myTable'),
            aLi = document.querySelectorAll('#myTable colgroup col');
    w = (subnav.offsetWidth - 60 - 120) / aLi.length;//通过容器的宽度除以li的个数来计算每个li的宽度
    for (var i = 1; i < aLi.length - 1; i++) {
        aLi[i].style.width = w + 'px';
    }
</script>
<script type="text/javascript">
    txz.initHeader({
        nav:[{
            name: '自定义信息收集',
            href: '${ctx}/gatherForm/project/list.do'
        },{
            name: '${project.title}',
            href: 'javascript:history.back();'
        },{
            name: '信息管理',
            curr: true
        }],
        btns:[{
            name: '返回',
            href: 'javascript:history.back();',
            icon: 'back'
        }]
    });
</script>
</body>
</html>